<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('服务器列表')" />
    <th:block th:include="include :: select2-css" />

    <style>
        .full-height {
            min-height: 100vh;  /* 至少占满 100% 的视口高度 */
            display: flex;
            flex-direction: column;
        }
        table {
            flex: 1;  /* 使表格占据剩余空间 */
        }
    </style>

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            应用名称：<input type="text" name="appName"/>
                        </li>
                        <li>
                            应用编码：<input type="text" name="appCode"/>
                        </li>

                        <li>
                            分组：<select name="longGroup" id = "longGroupSelect" >
                            <option value="">所有</option>
                        </select>
                        </li>
                        <li>
                            服务器：<select name="appServerId" id = "appServerId" >
                            <option value="">所有</option>
                        </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="restSearch()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" >
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" >
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>

        <div class="  col-sm-12   table-striped" style="height:500px">
            <table id="bootstrap-table"></table>
        </div>
    </div>

    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <h4 class="modal-title">应用详情</h4>
                </div>
                <div class="modal-body">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>基本</h5>
                        </div>
                        <div class="ibox-content">

                            <table class="table" id="taskAppList">
                                <thead>
                                <tr>
                                    <th>是否选择</th>
                                    <th>服务器Ip</th>
                                    <th>应用路径</th>
                                    <th>日志路径</th>
                                </tr>
                                </thead>
                                <tbody >
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="sureTest" data-dismiss="modal" >xxx</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>




</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var prefix = ctx + "server";
    $(function() {
        $.when(appendServer([[${serverId}]]), appendGroup()).then(function() {
            console.log("所有方法按顺序执行完毕");
            setTimeout(function() {
                loadTable()// 延时执行
            }, 500);
        });
    });
    
    function  restSearch() {
        $.form.reset();
        $("#appServerId").val([]).trigger('change');
    }

    //加载服务器列表
    function  appendServer(serverId) {
        $.operate.ajaxGet(ctx+"server/listServer",function (data) {

            $.each(data, function(index, item) {
                $('#appServerId').append('<option value="' + item.id + '">' + item.serverIp+ '</option>');
            });
            $('#appServerId').select2({
                placeholder: "请选择服务器",
                allowClear: true
            });
            if (serverId !== undefined && serverId !== null) {
                console.log("默认值")
                $("#appServerId").val([serverId]).trigger('change');
            }
        })
    }
    
    function  appendGroup() {
            //下拉框
        $.operate.get(ctx+"group/listGroup",function (res) {
            $.each(res.data, function(index, item) {
                $('#longGroupSelect').append('<option value="' + item.id + '">' + item.groupName + '</option>');

            });
        })
    }


    function openAppServer(id,type) {
        $.operate.ajaxGet(ctx+"app/listAppServer?id="+id,function (data) {
            $('#taskAppList tbody').empty();
            $.each(data,function (index,value) {
                $('#taskAppList tbody').append(
                    '<tr>' +
                    '<td>    <label class="check-box"> <input type="checkbox" checked value="' + value.id + '" id="inlineCheckbox' + value.id + '") + ></label></td>' +
                    '<td>' + value.serverIp + '</td>' +
                    '<td>' + value.logPath + '</td>' +
                    '<td>' + value.appPath + '</td>' +
                    '</tr>'
                );

                if(type == 0){
                    $('#sureTest').text('拉取日志');
                }else if(type == 1){
                    $('#sureTest').text('启动');
                }else if(type == 2){
                    $('#sureTest').text('停止');
                }else if(type == 3){
                    $('#sureTest').text('重启');
                }
                $('#myModal').modal('show');
            });
        })

    }

    /**
     * 加载表单
     * @param appendCols
     */
    function  loadTable() {
        var options = {
            height:750,
            url: ctx + "app/pageList",
            createUrl: ctx+ "page/app/appAdd",
            updateUrl:  ctx+"page/app/appEdit",
            removeUrl:   ctx+"app/remove",
            detailUrl:  ctx + "app/appTest",
            modalName: "应用",
            columns:[
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    visible: false
                },
                {
                    field: 'appName',
                    title: '应用名称'
                },
                {
                    field: 'appCode',
                    title: '应用编码'
                },
                {
                    field: 'appPath',
                    title: '应用路径'
                },
                {


                    field: 'logPath',
                    title: '日志路径',
                    align: 'center',
                    colspan: 1,
                    width:50

                },
                {
                    field: 'startCmd',
                    title: '启动命令'
                },
                {
                    field: 'appPrincipal',
                    title: '负责人'
                },
                {
                    field: 'jarName',
                    title: '包名'
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable: true
                },
                {
                    title: '操作',
                    formatter: function (value, row, index) {
                         var actions = [];

                        actions.push('<span class="dropdown">');
                        actions.push(' <a class="btn btn-success btn-xs dropdown-toggle" href="javascript:void(0)"id="dropdownMenu2" data-toggle="dropdown"><i class="fa fa-cogs"></i>基本操作</a>  ');
                        actions.push('<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">');
                        actions.push( '<li class="mt5">');
                        actions.push('<a class="btn  btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push( '</li>');
                        actions.push( '<li class="mt5">');
                        actions.push('<a class="btn  btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        actions.push( '</li>');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openDetail(" + row.id + ")'><i class='fa fa-bars'></i>查看详情</a> ");
                        actions.push( '</li>');
                        actions.push('</ul>');
                        actions.push( ' </span>');


                        actions.push('<span class="dropdown">');
                        actions.push(' <a class="btn btn-success btn-xs dropdown-toggle" href="javascript:void(0)"id="dropdownMenu3" data-toggle="dropdown"><i class="fa fa-chevron-circle-right"></i>命令管理</a>  ');
                        actions.push('<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openAppServer(" + row.id + ", 0)'><i class='fa fa-download'></i>拉取日志</a> ");
                        actions.push( '</li>');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openAppServer(" + row.id + ", 1)'><i class='fa fa-play'></i>启动</a> ");
                        actions.push( '</li>');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openAppServer(" + row.id + ", 2)'><i class='fa fa-stop'></i>停止</a> ");
                        actions.push( '</li>');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openAppServer(" + row.id + ", 3)'><i class='fa fa-refresh'></i>重启</a> ");
                        actions.push( '</li>');
                        actions.push('</ul>');
                        actions.push( ' </span>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    }
    
    function  openDetail(id) {
        $.modal.openWithClose("查看详情",ctx+"page/app/appDetail?id="+id);
    }

    $('#sureTest').on('click', function() {
        var buttonText = $(this).text();  // 获取按钮的文本


        var selectedValues = [];
        $('#taskAppList tbody input[type="checkbox"]:checked').each(function() {
            selectedValues.push($(this).val());  // 将选中的checkbox的value添加到数组
        });
        if(selectedValues.length == 0){
            $.modal.msgError("请选择一个内容执行");
            return
        }

        if(buttonText == '停止'){
            $.operate.ajaxGet(ctx+"app/stopCmd?ids="+selectedValues.join(','),function (res) {
                $.modal.alertSuccess("操作成功！");
                $('#myModal').modal('hiden');
            })
        }else if(buttonText == '启动'){
            $.operate.ajaxGet(ctx+"app/startCmd?ids="+selectedValues.join(','),function (res) {
                $.modal.alertSuccess("操作成功！");
                $('#myModal').modal('hiden');
            })
        }else if(buttonText == '重启'){
        $.operate.ajaxGet(ctx+"app/restartCmdc  ?ids="+selectedValues.join(','),function (res) {
            $.modal.alertSuccess("操作成功！");
            $('#myModal').modal('hiden');
        })
    }

    });



</script>
</body>
</html>